<template>
  <view>
    <u-popup v-model="show" mode="center">
      <view class="iconbox">
        <view class="edits" @click="edit(idx)"
          >修改
          <u-icon name="edit-pen"></u-icon>
        </view>
        <view class="del" @click="del(idx)"
          >删除
          <u-icon name="minus-circle"></u-icon>
        </view>
      </view>
    </u-popup>
	
    <view class="card" v-for="(v, index) in qarr"  :key="v.id">
      <view class="flex flex-j-b">
        <view class="flex">
          <view>{{ v.monthAge }}月龄</view>
        </view>
        <view class="cardTag c1" v-show="v.flag == '正常'">{{ v.flag }}</view>
        <view class="cardTag c4" v-show="v.flag == '瘦弱'">{{ v.flag }}</view>
        <view class="cardTag c5" v-show="v.flag == '偏瘦'">{{ v.flag }}</view>
        <view class="cardTag c2" v-show="v.flag == '偏胖'">{{ v.flag }}</view>
        <view class="cardTag c3" v-show="v.flag == '肥胖'">{{ v.flag }}</view>
      </view>
      <view class="flex flex-j-a" style="margin: 50upx 0 0">
        <view>
          <u-icon
            name="shengao"
            custom-prefix="custom-icon"
            color="#18C7E1"
            size="48px"
            class="iconx"
          ></u-icon>
          <view>身高</view>
          <view>{{ v.height }}cm</view>
        </view>
        <view>
          <u-icon
            name="icon"
            custom-prefix="custom-icon"
            color="#18C7E1"
            size="48px"
            class="iconx"
          ></u-icon>
          <view>体重</view>
          <view>{{ v.weight }}kg</view>
        </view>
      </view>
      <view @click="shows(v)">
        <u-icon name="edit-pen" @click="shows(v)" class="btns"></u-icon>
      </view>
    </view>
    <!-- <view class="edit" @tap="goAddGraph">
			<u-icon name="edit-pen-fill" color="#fff" size="45"></u-icon>
		</view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      qarr: [],
      show: false,
      idx: "",
    };
  },
  props: ["qxData"],
  onBackPress(e) {
    uni.switchTab({
      url: "/pages/home/home",
    });
    return true;
  },
  methods: {
    shows(index) {
      this.idx = index;
      this.show = true;
    },
    goAddGraph() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/grow-graph2-add",
      });
    },
    edit(v) {
      let sg = v.height;
      let tj = v.weight;
      let time = v.createTime;
      this.config
        .get("/childrenInfo/getChildrenQx", {
          id: v.id,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            uni.navigateTo({
              url:
                "/pages/main/child/backlog/grow-graph2-add?sg=" +
                sg +
                "&tj=" +
                tj +
                "&time=" +
                time +
                "&id=" +
                v.id,
            });
            this.show = false;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    del(v) {
      this.config
        .post("/childrenInfo/delChildrenQx", {
          id: v.id,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            this.show = false;
            this.$emit("getGraph");
            uni.navigateTo({
              url: "./grow-graph",
            });
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
  },
  mounted() {
    this.qarr = this.qxData;
  },
};
</script>
<style lang="less" scoped>
.edits {
  padding: 20rpx;
  color: #ffffff;
  line-height: 20rpx;
  border-radius: 10rpx;
  background-color: #18c7e1;
  width: 270rpx;
  text-align: center;
}

.del {
  margin-top: 20rpx;
  padding: 20rpx;
  color: #ffffff;
  background-color: #fd6666;
  line-height: 20rpx;
  border-radius: 10rpx;
  width: 270rpx;
  text-align: center;
}
.iconbox {
  margin: 66rpx 36rpx;
}
.card {
  margin: 20upx;
  border-radius: 20upx;
  box-shadow: 0 0 10upx 0 #ccc;
  padding: 30upx;
  position: relative;
  overflow: hidden;

  .cardTag {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 20upx 40upx;
    background-color: #1abbe5;
    // background-color: #E5A965;
    color: #fff;
    border-top-right-radius: 18upx;
    border-bottom-left-radius: 30upx;
  }
  .c1 {
    background-color: #3fb67a;
  }
  .c2 {
    background-color: #fab82b;
  }
  .c3 {
    background-color: #ff8a15;
  }
  .c4 {
    background-color: #bc3a21;
  }
  .c5 {
    background-color: #e24425;
  }

  .btns {
    position: absolute;
    right: 0;
    bottom: 0px;
    font-size: 32px;
    color: #84e1ef;
  }
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 10%;
  bottom: 20%;
}
.iconx {
  margin-left: -20rpx;
  transform: scale(0.8);
}
</style>
